<%-- 
    Document   : personal.jsp
    Created on : Apr 11, 2012, 5:00:54 AM
    Author     : Mr. Hung
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" media="all" />
        <link href="style.css" rel="stylesheet" type="text/css" />

        <title>${account.username}</title>
    </head>
    <body>
        <c:import url="/header.jsp"/>
        <c:import url="/leftbar.jsp"/>

        <div id="wrapper">


            <div id="content_wrapper"><span class="top"></span><span class="bottom"></span>
                <div id="content">
                    <div class="avatar_box" >
                    <table>
                        <tr>
                                <td width="135" rowspan="5"> 
                                    <img src="${account.avatar}" height="120" width="120">
                                </td>
                                <td align="right"><label>Username:</label></td>
                                <td width="10"></td>
                            <td>${account.username}</td>
                        </tr>
                        <tr>
                                <td align="right"><label>Email Address:</label></td>
                                <td width="10"></td>
                            <td>${account.emailAddress}</td>
                        </tr>
                        <tr>
                                <td align="right"><label>Birthday:</label></td>
                                <td width="10"></td>
                            <td>${account.birthday}</td>
                        </tr>
                        <tr>
                                <td align="right"><label>Gender:</label></td>
                                <td width="10"></td>
                            <td>${account.gender}</td>
                        </tr>
                        <tr>
                                <td align="right"><label>Interested Gender:</label></td>
                                <td width="10"></td>
                            <td>${account.interestGender}</td>
                        </tr>
                    </table>
                    </div>

                    <div class="personal_box">
                        <table >
                            <td width="150" valign="top"><h3>Hobbies:</h3></td>
                            <td>
                                <ul>
                        <c:forEach var="hobby" items="${account.hobbies}">
                                        <li>
                                            <label>${hobby}</label>
                                        </li>
                        </c:forEach>
                                </ul>
                            </td>
                        </table>
                    </div>

                    <div class="settings_box">
                        <h3>Dislikes:</h3>
                    <p>
                        <c:forEach var="dislike" items="${account.dislikes}">
                            ${dislike}
                        </c:forEach>
                    </p>
                    </div>
                    <div class="settings_box">
                        <h3>Study and Job:</h3>
                        <table>
                        <tr>
                                <td width="60"></td>
                                <td align="right" valign="top"><label>School:</label></td>
                                <td width="20"></td>
                            <td>${account.career.school}</td>
                        </tr>
                            <tr height="4">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        <tr>
                                <td width="60"></td>
                                <td align="right" valign="top"><label>Job:</label></td>
                                <td width="20"></td>
                            <td>${account.career.job}</td>
                        </tr>
                    </table>
                    </div>

                    <div class="settings_box">
                        <h3>Residence:</h3>
                        <table >
                        <tr>
                                <td width="30"></td>
                                <td align="right" valign="top"><label>Address:</label></td>
                                <td width="20"></td>
                            <td>${account.location.address}</td>
                        </tr>
                            <tr height="4">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                        </tr>
                        <tr>
                                <td width="30"></td>
                                <td align="right" valign="top"><label>Home town:</label></td>
                                <td width="20"></td>
                            <td>${account.location.hometown}</td>
                        </tr>
                            <tr height="4">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td width="30"></td>
                                <td align="right" valign="top"><label>Country:</label></td>
                                <td width="20"></td>
                                <td>${account.location.country}</td>
                            </tr>

                    </table>
                    </div>

                </div> <!-- end of content -->

                <div id="sidebar">
                    <div class ="profile_box">
                        <a href="personal.jsp">
                            <h2 align="center">${account.username}</h2>
                        </a>
                        <a id="avatar" href="personal.jsp" >
                            <img src="images/shin.jpg" height="250" width="250"> 
                        </a>
                    </div>
                    <div class="news_box">
                        <a href="friends.jsp"> <h2 align="center">Friend list (${sessionScope.account.numOfFriends})</h2></a>
                        <table>
                                    <tr>
                                <td width="80">
                                    <a href="">
                                        <img src="images/shin.jpg" height="70" width="70">
                                    </a>
                                        </td>
                                <td valign="top">
                                    <a href="">Friend Name</a>
                                        </td>
                            </tr>
                            <tr>
                                <td width="80">
                                    <a href="">
                                        <img src="images/shin.jpg" height="70" width="70">
                                    </a>
                                        </td>
                                <td valign="top">
                                    <a href="">Friend Name</a>
                                        </td>
                                    </tr>
                                    <tr>
                                <td width="80">
                                    <a href="">
                                        <img src="images/shin.jpg" height="70" width="70">
                                    </a>
                                        </td>
                                <td valign="top">
                                    <a href="">Friend Name</a>
                                        </td>
                                    </tr>
                            <tr>
                                <td width="80">
                                    <a href="">
                                        <img src="images/shin.jpg" height="70" width="70">
                                    </a>
                                </td>
                                <td valign="top">
                                    <a href="">Friend Name</a>
                                </td>
                            </tr>
                            <tr>
                                <td width="80">
                                    <a href="">
                                        <img src="images/shin.jpg" height="70" width="70">
                                    </a>
                                </td>
                                <td valign="top">
                                    <a href="">Friend Name</a>
                                </td>
                            </tr>
                            </table>
                    </div>
                    <div class="cleaner"></div>  
                </div>

                <div class="cleaner"></div>
            </div> <!-- end of content_wrapper -->
            
        </div> <!-- end of wrapper -->
<c:import url="/footer.jsp"/>
    </body>
</html>




